<template>
  <div>
    <BasicModal
      @register="sendRegisterModal"
      v-bind="$attrs"
      title="新通知"
      :helpMessage="['查看帮助']"
    >
      <!--步骤进度-->
      <Steps :current="current" style="margin-bottom: 20px">
        <Step :title="item.title" v-for="(item, index) in stepList" :key="index" />
      </Steps>
      <!--步骤需填写表单-->
      <BasicForm @register="registerForm">
        <template #iconWebSlot>
          <div>
            <div>
              <Switch v-model:checked="isSelectIcon" checked-children="√" />
              <span style="margin-left: 10px">图标</span>
            </div>
            <div style="margin-top: 10px" v-show="isSelectIcon">
              <IconPicker v-model:value="selectedIcon" />
              <ColorPicker v-model="selectedColor" />
            </div>
          </div>
        </template>
        <template #pushMethodSlot>
          <PushMethod
            :delivery-methods="deliveryMethodsList"
            :select-methods="selectedMethods"
            @step-list="getStepList"
          />
        </template>
        <template #tinymceEmailSlot>
          <Tinymce v-model="TinymceValue" @change="handleTinymceChange" width="100%" />
        </template>
        <template #MICROSOFT_TEAMSColorSlot>
          <ColorPicker v-model="TeamSelectedColor" />
        </template>
      </BasicForm>
      <!--底部按钮-->
      <template #footer>
        <Button
          class="mr-2"
          type="primary"
          size="middle"
          @click="stepLastClick"
          v-show="current > 0"
          >后退</Button
        >
        <Button class="mr-2" type="primary" size="middle" @click="stepNextClick">{{
          okText
        }}</Button>
      </template>
    </BasicModal>
    <!--添加通知收件人组弹窗-->
    <CreateRecipientModal @register="registerModal" />
  </div>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { Steps, Step, Button, Switch } from 'ant-design-vue';
  import { stepModal } from '../data/notification.data';
  import PushMethod from '../PushMethod.vue';
  import CreateRecipientModal from './CreateRecipientModal.vue';
  import { useModal } from '/@/components/Modal';
  import { onMounted } from 'vue';
  import { ref } from 'vue';
  import { IconPicker } from '/@/components/Icon/index';
  import { Tinymce } from '/@/components/Tinymce';
  import { usePermission } from '/@/hooks/web/usePermission';
  const { hasPermission } = usePermission();
  import {
    getDeliveryMethods,
    getDashboardsList,
    getDashboardsStatus,
    getNotificationTemplate,
  } from '/@/api/thingsborad/notification/notification';
  import { notificationsParams } from '/@/api/thingsborad/notification/model/notificationsModel';
  import ColorPicker from '/@/components/ColorPicker/main.vue';
  import { watch } from 'vue';
  const emits = defineEmits(['closeFlag']);
  let selectedColor = ref<string>('#ff0000');
  let TeamSelectedColor = ref<string>('#ff0000');
  //组合 收件人选择
  let selectRecipient = ref<Array<any>>([]);
  // 编辑 已选择的推送方法
  let selectedMethods = ref<Array<any>>([]);
  let deliveryMethodsList = ref<Array<any>>();
  let isSelectIcon = ref<boolean>(false);
  let selectedIcon = ref<any>();
  let TinymceValue = ref<any>();
  let okText = ref<string>('下一步');

  const current = ref(0);

  //表单类型
  let schemas: FormSchema[] = [
    // 组合
    {
      show: () => {
        return current.value === 0;
      },
      field: 'templateName',
      component: 'Input',
      label: '名称',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入名称',
      },
    },
    {
      show: () => {
        return current.value === 0;
      },
      field: 'templateType',
      component: 'Select',
      label: '类型',
      colProps: {
        span: 24,
      },
      defaultValue: 'GENERAL',
      componentProps: {
        options: [
          {
            label: '通用',
            value: 'GENERAL',
          },
          {
            label: '告警',
            value: 'ALARM',
          },
          {
            label: '设备活动',
            value: 'DEVICE_ACTIVITY',
          },
          {
            label: '实体操作',
            value: 'ENTITY_ACTION',
          },
          {
            label: '告警评论',
            value: 'ALARM_COMMENT',
          },
          {
            label: '告警分配',
            value: 'ALARM_ASSIGNMENT',
          },
          {
            label: '规则引擎生命周期事件',
            value: 'RULE_ENGINE_COMPONENT_LIFECYCLE_EVENT',
          },
          {
            label: '规则节点',
            value: 'RULE_NODE',
          },
        ],
      },
    },
    {
      ifShow: () => {
        return current.value === 0;
      },
      field: 'pushMethod',
      component: 'Switch',
      slot: 'pushMethodSlot',
      label: '',
      colProps: {
        span: 24,
      },
    },
    // web
    {
      show: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'themeWeb',
      component: 'Input',
      label: '主题',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入主题',
      },
    },
    {
      show: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'informationWeb',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'iconWeb',
      component: 'Input',
      slot: 'iconWebSlot',
      label: '',
      colProps: {
        span: 24,
      },
    },
    {
      show: () => {
        return stepList.value[current.value].title === 'WEB';
      },
      field: 'operateSwitch',
      component: 'Switch',
      suffix: '操作按钮',
      label: '操作',
      colProps: {
        span: 4,
      },
    },
    {
      show: (value) => {
        return value.model.operateSwitch && true && stepList.value[current.value].title === 'WEB';
      },
      field: 'buttonTextWeb',
      component: 'Input',
      label: '按钮文本',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入按钮文本',
      },
    },
    {
      show: (value) => {
        return value.model.operateSwitch && stepList.value[current.value].title === 'WEB' && true;
      },
      field: 'operationTypeWeb',
      component: 'Select',
      label: '操作类型',
      colProps: {
        span: 24,
      },
      defaultValue: 'OpenURLLink',
      componentProps: {
        options: [
          {
            label: '打开URL链接',
            value: 'OpenURLLink',
          },
          {
            label: '打开仪表板',
            value: 'OpenDashboard',
          },
        ],
      },
    },
    {
      show: (value) => {
        return (
          value.model.operateSwitch &&
          true &&
          stepList.value[current.value].title === 'WEB' &&
          value.model.operationTypeWeb === 'OpenURLLink'
        );
      },
      field: 'linkWeb',
      component: 'Input',
      label: ' 链接',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入链接',
      },
    },
    {
      show: (value) => {
        return (
          value.model.operationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'WEB'
        );
      },
      field: 'instrumentPanelWeb',
      component: 'Select',
      label: '仪表板',
      colProps: {
        span: 24,
      },
    },
    {
      show: (value) => {
        return (
          value.model.operationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'WEB'
        );
      },
      field: 'dashboardStatus',
      component: 'Select',
      label: '目标仪表板状态',
      colProps: {
        span: 24,
      },
      componentProps: {
        onFocus: async () => {
          let validateValue = await validate();

          if (validateValue.instrumentPanelWeb !== undefined) {
            getDashboardStatus(validateValue.instrumentPanelWeb);
          }
        },
      },
    },
    {
      show: (value) => {
        return (
          value.model.operateSwitch &&
          value.model.operationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'WEB'
        );
      },
      field: 'SetDashboardStatus',
      component: 'Switch',
      label: '',
      suffix: '将通知中的实体设置为仪表盘状态',
      colProps: {
        span: 9,
      },
    },
    //email
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'EMAIL';
      },
      field: 'themeEmail',
      component: 'Input',
      label: '主题',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入主题',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'EMAIL';
      },
      field: 'tinymceEmail',
      component: 'Input',
      label: '信息',
      slot: 'tinymceEmailSlot',
      colProps: {
        span: 24,
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'SMS';
      },
      field: 'SMSInput',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'SLACK';
      },
      field: 'SLACKInput',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSInput',
      component: 'Input',
      label: '主题',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSMessage',
      component: 'Input',
      label: '信息',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入信息',
      },
    },
    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSColor',
      component: 'Input',
      label: 'Theme color',
      slot: 'MICROSOFT_TEAMSColorSlot',
      colProps: {
        span: 24,
      },
    },
    {
      show: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'operateSwitch',
      component: 'Switch',
      suffix: '操作按钮',
      label: '操作',
      colProps: {
        span: 4,
      },
    },
    {
      ifShow: (value) => {
        return (
          value.model.operateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'buttonTextWeb',
      component: 'Input',
      label: '按钮文本',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入按钮文本',
      },
    },
    {
      ifShow: (value) => {
        return (
          value.model.operateSwitch &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS' &&
          true
        );
      },
      field: 'operationTypeWeb',
      component: 'Select',
      label: '操作类型',
      colProps: {
        span: 24,
      },
      defaultValue: 'OpenURLLink',
      componentProps: {
        options: [
          {
            label: '打开URL链接',
            value: 'OpenURLLink',
          },
          {
            label: '打开仪表板',
            value: 'OpenDashboard',
          },
        ],
      },
    },
    {
      ifShow: (value) => {
        return (
          value.model.operateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'linkWeb',
      component: 'Input',
      label: ' 链接',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入链接',
      },
    },

    {
      ifShow: () => {
        return stepList.value[current.value].title === 'MICROSOFT_TEAMS';
      },
      field: 'MICROSOFT_TEAMSoperateSwitch',
      component: 'Switch',
      suffix: '操作按钮',
      label: '操作',
      colProps: {
        span: 4,
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSbuttonTextWeb',
      component: 'Input',
      label: '按钮文本',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入按钮文本',
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS' &&
          true
        );
      },
      field: 'MICROSOFT_TEAMSoperationTypeWeb',
      component: 'Select',
      label: '操作类型',
      colProps: {
        span: 24,
      },
      defaultValue: 'OpenURLLink',
      componentProps: {
        options: [
          {
            label: '打开URL链接',
            value: 'OpenURLLink',
          },
          {
            label: '打开仪表板',
            value: 'OpenDashboard',
          },
        ],
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          true &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS' &&
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenURLLink'
        );
      },
      field: 'MICROSOFT_TEAMSlinkWeb',
      component: 'Input',
      label: ' 链接',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入链接',
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSinstrumentPanelWeb',
      component: 'Select',
      label: '仪表板',
      colProps: {
        span: 24,
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSdashboardStatus',
      component: 'Select',
      label: '目标仪表板状态',
      colProps: {
        span: 24,
      },
      componentProps: {
        onFocus: async () => {
          let validateValue = await validate();

          if (validateValue.MICROSOFT_TEAMSinstrumentPanelWeb !== undefined) {
            getDashboardStatus(validateValue.MICROSOFT_TEAMSinstrumentPanelWeb);
          }
        },
      },
    },
    {
      show: (value) => {
        return (
          value.model.MICROSOFT_TEAMSoperateSwitch &&
          value.model.MICROSOFT_TEAMSoperationTypeWeb === 'OpenDashboard' &&
          stepList.value[current.value].title === 'MICROSOFT_TEAMS'
        );
      },
      field: 'MICROSOFT_TEAMSSetDashboardStatus',
      component: 'Switch',
      label: '',
      suffix: '将通知中的实体设置为仪表盘状态',
      colProps: {
        span: 9,
      },
    },
  ];
  let richText = ref<any>();

  let dataList = ref<Array<any>>([]);
  let dashboardsList = ref<Array<any>>([]);
  const [registerForm, { validate, updateSchema, setFieldsValue, resetFields }] = useForm({
    layout: 'vertical',
    schemas,
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });

  const [sendRegisterModal, { closeModal }] = useModalInner(async (data) => {
    resetFields();
    selectedMethods.value = [];
    current.value = 0;
    isSelectIcon.value = false;
    if (data !== true) {
      if (data.key === '编辑') {
        setFieldsValue({
          templateName: data.record.name,
        });
      } else {
        setFieldsValue({
          templateName: data.record.name + '(复制)',
        });
      }
      setFieldsValue({
        templateType: data.record.info.notificationType,
      });
      Object.keys(data.record.info.configuration.deliveryMethodsTemplates).forEach(async (keys) => {
        selectedMethods.value.push(keys);
        if (keys === 'WEB') {
          setFieldsValue({
            themeWeb: data.record.info.configuration.deliveryMethodsTemplates.WEB.subject,
            informationWeb: data.record.info.configuration.deliveryMethodsTemplates.WEB.body,
          });
          if (
            data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig.icon
              .enabled
          ) {
            isSelectIcon.value = true;
            selectedIcon.value =
              data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig.icon.icon;
            selectedColor.value =
              data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig.icon.color;
          }

          if (
            data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig
              .actionButtonConfig.enabled
          ) {
            setFieldsValue({
              operateSwitch: true,
              buttonTextWeb:
                data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig
                  .actionButtonConfig.text,
            });
            if (
              data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig
                .actionButtonConfig.linkType === 'LINK'
            ) {
              setFieldsValue({
                operationTypeWeb: 'OpenURLLink',
                linkWeb:
                  data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig
                    .actionButtonConfig.link,
              });
            } else {
              setFieldsValue({
                operationTypeWeb: 'OpenDashboard',
                instrumentPanelWeb:
                  data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig
                    .actionButtonConfig.dashboardId,
                dashboardStatus:
                  data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig
                    .actionButtonConfig.dashboardState,
                SetDashboardStatus:
                  data.record.info.configuration.deliveryMethodsTemplates.WEB.additionalConfig
                    .actionButtonConfig.setEntityIdInState,
              });
            }
          }
        }
        if (keys === 'EMAIL') {
          ((TinymceValue.value =
            data.record.info.configuration.deliveryMethodsTemplates.EMAIL.body),
          data.record.info.configuration.deliveryMethodsTemplates.EMAIL.subject),
            setFieldsValue({
              themeEmail: data.record.info.configuration.deliveryMethodsTemplates.EMAIL.subject,
            });
        }
        if (keys === 'SMS') {
          setFieldsValue({
            SMSInput: data.record.info.configuration.deliveryMethodsTemplates.SMS.body,
          });
        }
        if (keys === 'SLACK') {
          setFieldsValue({
            SLACKInput: data.record.info.configuration.deliveryMethodsTemplates.SLACK.body,
          });
        }
        if (keys === 'MICROSOFT_TEAMS') {
          setFieldsValue({
            MICROSOFT_TEAMSInput:
              data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.subject,
            MICROSOFT_TEAMSMessage:
              data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.body,
          });
          if (
            data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button.enabled
          ) {
            setFieldsValue({
              MICROSOFT_TEAMSoperateSwitch: true,
              MICROSOFT_TEAMSbuttonTextWeb:
                data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button.text,
            });
            if (
              data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button
                .linkType === 'LINK'
            ) {
              setFieldsValue({
                MICROSOFT_TEAMSoperationTypeWeb: 'OpenURLLink',
                MICROSOFT_TEAMSlinkWeb:
                  data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button
                    .link,
              });
            } else {
              setFieldsValue({
                MICROSOFT_TEAMSSetDashboardStatus:
                  data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button
                    .setEntityIdInState,
                MICROSOFT_TEAMSoperationTypeWeb: 'OpenDashboard',
                MICROSOFT_TEAMSdashboardStatus:
                  data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button
                    .dashboardState,
                MICROSOFT_TEAMSinstrumentPanelWeb:
                  data.record.info.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button
                    .dashboardId,
              });
            }
          }
        }
      });
    } else {
      selectRecipient.value = [];
      selectedMethods.value = ['WEB'];
    }
    getMethods();
    updateSchema({
      field: 'MICROSOFT_TEAMSinstrumentPanelWeb',
      componentProps: {
        options: dashboardsList.value,
      },
    });
    updateSchema({
      field: 'instrumentPanelWeb',
      componentProps: {
        options: dashboardsList.value,
      },
    });
  });

  //推送方式
  async function getMethods() {
    try {
      const deliveryMethodsData = await getDeliveryMethods();
      deliveryMethodsList.value = deliveryMethodsData;
    } catch (error) {}
  }
  //获取子组件传值
  let stepList = ref<stepModal[]>([]);
  const getStepList = (
    value: { title: string; description?: string | undefined; subTitle?: string | undefined }[],
  ) => {
    stepList.value = value;
    stepList.value.pop();
    stepList.value[0].title = '基本设置';

    if (current.value === 0) {
      return;
    }
    current.value = 0;
  };
  // 添加通知收件人组
  const [registerModal, { setModalProps }] = useModal();
  onMounted(() => {
    //初始化发送通知的弹窗大小
    setModalProps({
      width: 600,
      height: 350,
    });
    getDashboardsData();
  });
  async function getDashboardsData() {
    if (hasPermission('SYS_ADMIN')) {
      dashboardsList.value = [];
      return;
    }
    try {
      let paramsValue: notificationsParams = {
        pageSize: 10,
        page: 0,
        sortProperty: 'title',
        sortOrder: 'ASC',
      };

      let dashboardsValue = await getDashboardsList(paramsValue);
      dashboardsValue.data.forEach((item: { name: any; id: { id: any } }) => {
        dashboardsList.value.push({
          label: item.name,
          value: item.id.id,
        });
      });
    } catch (error) {}
  }
  function handleTinymceChange(value: any) {
    richText.value = value;
  }

  //步骤进度下一步点击事件
  async function stepNextClick() {
    if (stepList.value.length - 1 === current.value) {
      const validateValue = await validate();

      let data: any = {
        name: validateValue.templateName,
        notificationType: validateValue.templateType,
        configuration: {
          deliveryMethodsTemplates: {},
        },
      };
      for (let i = 1; i <= stepList.value.length - 1; i++) {
        if (stepList.value[i].title === 'WEB') {
          data.configuration.deliveryMethodsTemplates['WEB'] = {
            enabled: true,
            subject: validateValue.themeWeb,
            body: validateValue.informationWeb,
            additionalConfig: {
              icon: {
                enabled: false,
              },
              actionButtonConfig: {
                enabled: false,
                linkType: 'LINK',
              },
            },
            method: 'WEB',
          };
          if (isSelectIcon.value) {
            data.configuration.deliveryMethodsTemplates.WEB.additionalConfig['icon'] = {
              enabled: true,
              icon: selectedIcon.value,
              color: selectedColor.value,
            };
          }
          if (validateValue.operateSwitch) {
            if (validateValue.operationTypeWeb === 'OpenURLLink') {
              data.configuration.deliveryMethodsTemplates.WEB.additionalConfig[
                'actionButtonConfig'
              ] = {
                enabled: true,
                text: validateValue.buttonTextWeb,
                linkType: 'LINK',
                link: validateValue.linkWeb,
              };
            } else {
              data.configuration.deliveryMethodsTemplates.WEB.additionalConfig[
                'actionButtonConfig'
              ] = {
                enabled: true,
                text: validateValue.buttonTextWeb,
                linkType: 'DASHBOARD',
                dashboardId: validateValue.instrumentPanelWeb,
                dashboardState: validateValue.dashboardStatus,
                setEntityIdInState: validateValue.SetDashboardStatus,
              };
            }
          }
        }
        if (stepList.value[i].title === 'SMS') {
          data.configuration.deliveryMethodsTemplates['SMS'] = {
            enabled: true,
            body: validateValue.SMSInput,
            method: 'SMS',
          };
        }
        if (stepList.value[i].title === 'EMAIL') {
          data.configuration.deliveryMethodsTemplates['EMAIL'] = {
            enabled: true,
            subject: validateValue.themeEmail,
            body: TinymceValue.value,
            method: 'EMAIL',
          };
        }
        if (stepList.value[i].title === 'SLACK') {
          data.configuration.deliveryMethodsTemplates['SLACK'] = {
            enabled: true,
            body: 'SlacK信息',
            method: 'SLACK',
          };
        }
        if (stepList.value[i].title === 'MICROSOFT_TEAMS') {
          data.configuration.deliveryMethodsTemplates['MICROSOFT_TEAMS'] = {
            enabled: true,
            subject: validateValue.MICROSOFT_TEAMSInput,
            body: validateValue.MICROSOFT_TEAMSMessage,
            themeColor: TeamSelectedColor.value,
            button: {
              enabled: false,
              linkType: 'LINK',
            },
            method: 'MICROSOFT_TEAMS',
          };
          if (validateValue.MICROSOFT_TEAMSoperateSwitch) {
            if (validateValue.MICROSOFT_TEAMSoperationTypeWeb === 'OpenURLLink') {
              data.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button = {
                enabled: true,
                text: validateValue.MICROSOFT_TEAMSbuttonTextWeb,
                linkType: 'LINK',
                link: validateValue.MICROSOFT_TEAMSlinkWeb,
              };
            } else {
              data.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.button = {
                enabled: true,
                text: validateValue.MICROSOFT_TEAMSbuttonTextWeb,
                linkType: 'DASHBOARD',
                dashboardId: validateValue.MICROSOFT_TEAMSinstrumentPanelWeb,
                dashboardState: validateValue.MICROSOFT_TEAMSdashboardStatus,
                setEntityIdInState: validateValue.MICROSOFT_TEAMSSetDashboardStatus,
              };
            }
          }
        }
      }

      try {
        await getNotificationTemplate(data);
        emits('closeFlag', true);
        dataList.value = [];
        current.value = 0;
        selectedMethods.value = ['WEB'];
        resetFields();
        isSelectIcon.value = false;
        closeModal();
      } catch (error) {}
    }

    if (current.value + 1 < stepList.value.length) {
      current.value += 1;
    }
  }
  //步骤进度后退点击事件
  function stepLastClick() {
    current.value -= 1;
  }
  watch(
    () => current.value,
    (nVal) => {
      if (stepList.value.length - 1 === nVal) {
        okText.value = '保存';
      } else {
        okText.value = '下一步';
      }
    },
  );

  async function getDashboardStatus(id: string) {
    try {
      let dashboardsArray = ref<Array<any>>([]);
      let dashboardsStatus = await getDashboardsStatus(id);
      Object.keys(dashboardsStatus.configuration.states).forEach((key: any) => {
        dashboardsArray.value.push({
          value: dashboardsStatus.configuration.states[key].name,
          label: key,
        });
      });
      updateSchema({
        field: 'MICROSOFT_TEAMSdashboardStatus',
        componentProps: {
          options: dashboardsArray.value,
        },
      });
      updateSchema({
        field: 'dashboardStatus',
        componentProps: {
          options: dashboardsArray.value,
        },
      });
    } catch (error) {}
  }
</script>
